<template id="shopDetails">
    <div style="height:auto;width:100%">
        <div class="shop_ding">
            <div class="shopDetails_top">
                <img src="../image/blue_da.png" alt=""  @click="getShopDetails()">
                <div class="shopDetails_a">
                    <router-link :to="{path:'/shopDetails/commodity', query:{goods_id:id}}" v-bind:id="[active1]" v-on:click.native="showS(1)">商品</router-link>
                    <router-link :to="{path:'/shopDetails/detail', query:{goods_id:id}}" v-bind:id="[active2]" v-on:click.native="showS(2)">详情</router-link>
                    <router-link :to="{path:'/shopDetails/shopEvaluate', query:{goods_id:id}}" v-bind:id="[active3]" v-on:click.native="showS(3)">评价</router-link>
                </div>
            </div>
        </div>
       <!--定位占的容器-->
        <div style="height:0.78rem;"></div>
    <div id="shop_stroll">
        <router-view></router-view>
    </div>
    </div>
</template>
<script>
    export default{
        name: 'shopDetails',
        data() {
            return {
                id:this.$route.query.goods_id,
                active1:'',
                active2:'',
                active3:'',
                scroll: ''
            }
        },
        mounted:function () {
            this.menus();

           /* window.addEventListener('scroll', this.stroll_m)*/
        },
        methods:{
            /*监测滚动条*/
        /*    stroll_m:function(){
                this.scroll = $('#shop_stroll').scrollTop;
                console.log(this.scroll)
                if(this.scroll>100){
                    this.$router.push('/shopDetails/detail')
                }
                if(this.scroll>500){
                    this.$router.push('/shopDetails/shopEvaluate')
                }
            },*/
            menus:function(){
                let url = this.$route.path;
                if(url == '/shopDetails/commodity'){
                    this.active1='showS'
                }
                if(url == '/shopDetails/detail'){
                    this.active2='showS'
                }
                if(url == '/shopDetails/shopEvaluate'){
                    this.active3='showS'
                }
            },
            showS:function(id){
                this.active1='';
                this.active2='';
                this.active3='';
                if(id == 1){this.active1 = 'showS';}
                if(id == 2){this.active2 = 'showS';}
                if(id == 3){this.active3 = 'showS';}

            },
            getShopDetails:function(){
                window.history.go(-1);
            },
        },

    };

</script>
<style>
    .shop_ding{
        position:fixed;
        top:0;
        left:0;
        height:0.78rem;
        width:100%;
        z-index:3;
        background:#ffffff;
    }
    /*新加的容器*/
    #showS{
        color:#24acfe;
        border-bottom:0.01rem solid #24acfe;
    }
    /*动态样式*/
    .shopDetails_a{
        height:0.77rem;
        width:3.17rem;
        margin:auto;
        display:flex;

    }
    .shopDetails_a a{
        display:block;
        flex:1;
        line-height:0.77rem;
        text-decoration:none;
        color:#373737;
        font-size:0.26rem;
        text-align:center;
    }
.shopDetails_top{
    width:100%;
    height:0.77rem;
    position:relative;
    border-bottom:1px solid #f0f0f0;
}
    .shopDetails_top img{
        position:absolute;
        display:block;
        height:0.36rem;
        width:0.36rem;
        left:0.25rem;
        top:0.2rem;
    }
</style>
